<template>
	<!-- 选择币种 -->
	<u-popup v-model="currentcyShow" mode="bottom" safe-area-inset-bottom>
		<view class="select-currency-box list-bg">
			<view class="title">
				<text class="white-text">{{i18n.common.allChoose}}</text>
				<u-icon class="icon-box" @click="currentcyShow = false" name="close" color="#fff" size="28"></u-icon>
			</view>
			<slot>
				<view class="select-currency-container" v-for="(item, index) in list" :key="item.id" @click="currentCyClick(item)">
					<text class="white-text">{{item.title}}</text>
					<u-icon v-show="currentCyIndex === item.id" name="checkbox-mark" color="#eec67f" size="30"></u-icon>
				</view>
			</slot>
			<view class="empty-container" v-show="!list.length">
				<u-empty :text="i18n.common.noData" mode="list"></u-empty>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			currentId: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {
				currentCyIndex: 0,
				currentcyShow: false
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			currentCyClick(item) {
				if (this.currentCyIndex === item.id) return;
				this.currentCyIndex = item.id;
				this.currentcyShow = false;
				this.$emit('click', {
					name: item.title,
					id: item.id,
					rate: item.rate || '',
					value: item.value || ''
				})
			},
			open() {
				this.currentcyShow = true;
			},
			close() {
				this.currentcyShow = false;
			}
		},
		watch: {
			currentId(val) {
				this.currentCyIndex = val;
			}
		}
	}
</script>

<style lang="scss">
	.select-currency-box {
		padding: 0 30rpx 10rpx;
		font-size: 28rpx;

		&:before {
			content: '';
			display: table;
		}

		.title {
			margin: 62rpx auto 56rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;

			.icon-box {
				position: absolute;
				right: 0;
				top: 8rpx;
			}
		}

		.select-currency-container {
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, .1);

			&:last-child {
				border-bottom: 0;
			}
		}

		.empty-container {
			text-align: center;
			padding: 60rpx 0;
		}
	}
</style>
